﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>搜索</title>
    <style>
        .searchInput{
            height:12.9%;
            width:100%;
            background:#f8f8f8;
            padding-top:2.8%;
            background-image:url('../Content/imgs/bg_search.jpg')
        }
        .searchInput div{
            margin:0 auto;
            width:400px;
        }
       .inp{
           width:400px;
       }
        .inp > .el-input__inner {
            height: 45px;
            line-height:45px;
        }
        .searchInput div i:hover {
            color: #0c8ed9;
        }
        .searchInput div .el-input__suffix{
            right:10px;
        }
        .searchContent{
            min-height:71%;
            width:50%;
            padding:0 25%;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .el-tabs__nav-wrap::after {
            height: 1px;
        }

        .el-tabs__item {
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            padding: 0 30px;
        }  
        .el-tabs__active-bar{
            width:60px !important;
        }
        .el-tabs__nav{
            padding-left:15px;
        }
        .header{
            width:100%;
            height:50px;
            line-height:50px;
            background-color: #f8f8f8;
            color: #999;
            font-size:15px;
            padding:0 10px;
        }
        .on {
            background-color: #fbfbfd;
        }
        .list {           
            padding:0 10px;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            border-bottom:1px solid #f0f0f0;
        }
        .list:hover{
            background:#f5f8fb;
            color:#14a9ff;
        }
       .zjlist { 
           height: 80px; 
           line-height: 80px;
           font-size: 13px; 
            border-bottom:1px solid #f0f0f0;

       }
        .zjlist a {
            text-decoration: none;
            color: black;
        }

        .zjlist:hover {
            background: #f5f8fb;
            color: #14a9ff;
        }
        .zjlist:hover a{
            color:#14a9ff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--顶部-->
        <div class="top">
            <el-row>
                <el-col :span="5">
                    <div>
                        <img src="~/Content/imgs/logo.png" style="height: 37px; width: 135px;" />
                    </div>
                </el-col>
                <el-col :span="7">
                    &nbsp;
                </el-col>
                <el-col :span="12">
                    <div class="top_item">
                        <a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                        <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>
                        <a href="/Car/BuyCar" target="_blank">
                            购物车 <el-badge :value="Carcount" class="item" type="primary">
                                <i class="el-icon-shopping-cart-1"></i>
                            </el-badge>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="searchInput">
            <div>
                <el-input placeholder="请输入内容" v-model="input2" class="inp">
                    <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;font-size:16px;"></i>
                </el-input>
            </div>
        </div>
        <div class="searchContent">
            <el-tabs v-model="activeName" v-on:tab-click="handleClick">
                <el-tab-pane label="单曲" name="single">
                    <div style="width:100%;height:40px;">
                        搜索到 xxxx相关的歌曲
                    </div>
                    <div style="width:100%;">
                        <el-row class="header">
                            <el-col :span="9">歌曲名</el-col>
                            <el-col :span="4">歌手</el-col>
                            <el-col :span="4">专辑</el-col>
                            <el-col :span="3">时长</el-col>
                            <el-col :span="4">操作</el-col>
                        </el-row>
                        <el-row v-for="(item,index) in searchPlayList" class="list">
                            <el-col :span="9">{{item.name}}</el-col>
                            <el-col :span="4">{{item.singer}}</el-col>
                            <el-col :span="4">{{item.album}}</el-col>
                            <el-col :span="3">{{item.time}}</el-col>
                            <el-col :span="4">
                                <el-button type="text" size="small">试听</el-button>
                                <el-button type="text" size="small">加入购物车</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="width:100%;text-align:center;margin-top:20px;">
                        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="专辑" name="album">
                    <div style="width:100%;height:40px;">
                        搜索到 xxxx相关的专辑
                    </div>
                    <div style="width:100%;">
                        <el-row class="header">
                            <el-col :span="12">专辑</el-col>
                            <el-col :span="9">歌手</el-col>
                            <el-col :span="3">发行时间</el-col>
                        </el-row>
                        <el-row class="zjlist">
                            <el-col :span="12" style="cursor:pointer;">
                                <img src="~/Content/musicImg/13.jpg" style="width:60px;height:60px;vertical-align:middle" />  <a href="/Music/PlayList"> 麦杰克小镇OST1 成长欢乐颂</a>
                            </el-col>
                            <el-col :span="9">
                                华语群星
                            </el-col>
                            <el-col :span="3">
                                2016-12-21
                            </el-col>
                        </el-row>
                        <el-row class="zjlist">
                            <el-col :span="12" style="cursor:pointer;">
                                <img src="~/Content/musicImg/13.jpg" style="width:60px;height:60px;vertical-align:middle" />  <a href="/Music/PlayList"> 麦杰克小镇OST1 成长欢乐颂</a>
                            </el-col>
                            <el-col :span="9">
                                华语群星
                            </el-col>
                            <el-col :span="3">
                                2016-12-21
                            </el-col>
                        </el-row>
                        <el-row class="zjlist">
                            <el-col :span="12" style="cursor:pointer;">
                                <img src="~/Content/musicImg/13.jpg" style="width:60px;height:60px;vertical-align:middle" />  <a href="/Music/PlayList"> 麦杰克小镇OST1 成长欢乐颂</a>
                            </el-col>
                            <el-col :span="9">
                                华语群星
                            </el-col>
                            <el-col :span="3">
                                2016-12-21
                            </el-col>
                        </el-row>
                    </div>
                    <div style="width:100%;text-align:center;margin-top:20px;">
                        <el-pagination background layout="prev, pager, next" :total="5" :hide-on-single-page="true"></el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="歌单" name="playlist">歌单</el-tab-pane>
                <el-tab-pane label="歌手" name="singer">歌手</el-tab-pane>
            </el-tabs>
        </div>
        <!--底部-->
        <footer class="el-footer-css">
            <div> <a hidefocus="true">关于我们</a>| <a hidefocus="true">监督举报</a> | <a hidefocus="true">广告服务</a> | <a hidefocus="true">投诉指引</a> | <a>隐私政策</a> | <a>儿童隐私政策</a> | <a hidefocus="true">用户服务协议</a>  |  <a hidefocus="true">招聘信息</a> | <a hidefocus="true">客服中心</a> | <a hidefocus="true">用户体验提升计划</a></div>
        </footer>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    search: '',
                    Carcount: 18,
                    input2: '',
                    activeName: 'single',
                    searchPlayList: [{
                        name: '我曾',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:45'
                    },
                    {
                        name: '多想在平庸的生活拥抱你',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:29'
                    },
                    {
                        name: '你的姑娘',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:08'
                    },
                    {
                        name: '姬和不如',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:12'
                    },
                    {
                        name: '关于孤独我想说的话',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:51'
                    },
                    {
                        name: '四块我',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'04:45'
                    },
                    {
                        name: '世本常态',
                        singer: '隔壁老樊',
                        album: '我曾',
                        time:'03:48'
                    },
                    {
                        name: '我的姑娘 他在远方',
                        singer: '隔壁老樊',
                        album: '我的姑娘',
                        time:'04:25'
                    }

                    ]
                }
            },
            methods: {
               handleClick(tab, event) {
                    console.log(tab.name)
                    localStorage.setItem('tab', tab.name);
                    localStorage.setItem('url', window.location.href)
              }
            },
            mounted() {
                if (localStorage.getItem('url') == window.location.href) {
                     var tab = localStorage.getItem('tab');
                     if (tab != null) {
                        this.activeName=tab
                     }       
                }
            },           
        })
        $(".searchContent ul li").click(function () {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
        });
        $(function () {
            $(".list div:first-child").css({"cursor":"pointer"});
        });
    </script>
</body>
</html>
